Ext.ux.IconCombo = new Ext.extend(Ext.form.ComboBox,{
	initComponent:function(){
		
		Ext.apply(this,{
			tpl:'<tpl for=".">'
				+ '<div class="x-combo-list-item ux-icon-combo-item '
				+ '{' + this.iconClsField + '}">'
				+ '{' + this.displayField + '}'
				+ '</div></tpl>'
		});
		
		
		// call parent initComponent
		Ext.ux.IconCombo.superclass.initComponent.call(this);
	},//end of functino initComponent
	
	onRender: function(ct,position){
		//call parent onRender
		Ext.ux.IconCombo.superclass.onRender.call(this,ct,position);
		
		if(console){
			console.log('this.wrap');
			console.log(this.wrap.id);
			console.log('\n');
			
			console.log('this.el');
			console.log(this.el.id);
			console.log('\n');
	   }
		
		//adjust styles
		this.wrap.applyStyles({position:'relative'});
		this.el.addClass('ux-icon-combo-input');
		
		//add div for icon
		this.icon = Ext.DomHelper.append(this.el.up('div.x-form-field-wrap'),{
			tag: 'div', style: 'position:absolute'
		})
	}, // end of function onRender
	setIconCls: function(){
		var rec = this.store.query(this.valueField,this.getValue()).itemAt(0);
		if(console){
			console.log('rec:\n');
			console.log('rec.id: ' + rec.id);
		}
			
		if(rec){
			this.icon.className = 'ux-icon-combo-icon ' + rec.get(this.iconClsField);
		}
	},//end of function setIconCls
	setValue: function(value){
		Ext.ux.IconCombo.superclass.setValue.call(this,value);
		
		this.setIconCls();
	}//end of function setValue
	
});
//register xtype
Ext.reg('iconcombo',Ext.ux.IconCombo);
//end of file
